<template>
  <div id="app">
    <h1>根组件</h1> {{$store.state.num}}
    <p>获取getter中的值：{{num10}}</p>
    <div>{{$store.state.person.name}}</div>
    <div>自已计算属性{{cA}}</div>
    <div>映射vuex中的state得到的计算属性{{count}}</div>
    <input type="text" v-model="$store.state.num">
    <add-item></add-item>
    <hr>
    <sub-item></sub-item>
  </div>
</template>

<script>
import AddItem from './components/AddItem.vue'
import SubItem from './components/SubItem.vue'

// 通过映射的方式来使用vuex.store中的数据
// 1. 导入vuex中定义工具函数 mapState 
//    es6中的按需导入
import { mapState, mapGetters, mapActions } from 'vuex'
// mapState是vuex中定义一个函数
// mapState(['count']) : 执行一个函数，并传入参数。
//      参数是一个数组，其中有一个元素,这个传参的格式是 mapState要求的。
//      它的返回值是：一个对象，格式是{count:function(){}}

//  在如下代码中，调用 mapState这个函数，把得到的对象合并到当前的外层对象中。
//  {
//      f: function(){ },
//      ...mapState(['count'])
//  }    

console.log(mapState(['count']))

export default {
  name: 'app',
  components: {
    AddItem,
    SubItem
  },
  // 下面的代码中有几个计算属性？
  // 2个。
  // 名字分别是： cA,count
  computed: {
    // 定义App.vue自已的计算属性
    cA () {
      return 100
    },
    // 调用 mapState这个函数，把得到的对象合并到当前的外层对象computed中
    ...mapState(['count']),
    ...mapGetters(['num10'])
  } ,
  created () {
    this.$store.dispatch('getData')
    // this.getData()
    //console.log(this.$store)
    // console.log('获取公共数据', this.$store.state.person.name)

    // 修改公共数据
    this.$store.state.person.name = "jack"
  },
  methods: {
    // ...mapActions(['getData'])
  }
}
</script>

<style>
#app {
  width: 300px;
  margin: 20px auto;
  border:1px solid #ccc;
  padding:4px;
}
</style>